<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="layout" content="mode" />
        <title>${Inter.printOut('Employees',session.language)}</title>
    </head>
    <body>
        <div class="undernav">
            <span class="menuButton"><g:link class="createEmployee" action="create">${Inter.printOut('New Employee',session.language)}</g:link></span>
            <!-- This is the help button. -->
            <%  def help = Help.findByNameAndLanguage("employee_list", session.language)
            def helplink = createLink(action:'show', controller:'help', id: help?.id )%>
            <a href="#" class="menulink" onClick="MyWindow=window.open('${helplink}','Help','width=350,height=450'); return false;">${Inter.printOut('Help',session.language)}</a>
            <!-- This is the end of the help button. -->
        </div>
      
        <div class="body"style="width:98%">
            <h1>
             ${Inter.printOut('Employees',session.language)}
            </h1>
            <g:if test="${flash.message}">
            <div class="message">${flash.message}</div>
            </g:if>
            <g:if test="${employeeInstanceList.size() < 1}">
              <div class="message">There is no employees in the ${session.mode} mode yet.</div>
            </g:if>
            <g:else>
              <div class="list">
                  <table class="sortableTable" style="table-layout: fixed">
                      <thead>
                             <tr>
                                  <th class="{sorter: 'link'}"><a href="#">${Inter.printOut('Name',session.language)}</a> </th>

                                   <th class="{sorter: 'link'}"><a href="#">${Inter.printOut('Title',session.language)}</a> </th>

                                   <th class="{sorter: 'numeric'}"><a href="#">${Inter.printOut('Monthly Salary',session.language)} (kr)</a> </th>

                                   <th class="{sorter: 'numeric'}"><a href="#">${Inter.printOut('Assigned work',session.language)} (%)</a> </th>

                                  <g:if test="${session.mode.equalsIgnoreCase('budget')}">
                                    <th class="{sorter: 'numeric'}"><a href="#">${Inter.printOut('Goal',session.language)} (%)</a></th>
                                  </g:if>
                      
                                  <th with="5%" class="{sorter: 'numeric'}"><a href="#">${Inter.printOut('Salary cost per year',session.language)} (kr)</a> </th>

                             </tr>
                      </thead>
                      <tbody>
                        <%
                        def TotalSalaryCost=0
                        %>
                      <g:each in="${employeeInstanceList}" status="i" var="employeeInstance">

                        <!--add this to control switching in different modes-->
                      <g:if test="${ModeAccess.isAvailableInCurrentMode(session.mode,employeeInstance.mode)}">

                          <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">

                              <td><g:link action="show" id="${employeeInstance.id}">${fieldValue(bean:employeeInstance, field:'firstName')} ${fieldValue(bean:employeeInstance, field:'lastName')}</g:link></td>

                              <td><g:link action="show" id="${employeeInstance.id}">${fieldValue(bean:employeeInstance, field:'title')}</g:link></td>

                              <td>
                                <g:formatNumber number="${employeeInstance.salary}" format="SEK ##"/>
                              </td>
                              <td>
                                 <g:formatNumber number="${employeeInstance.actualWorkingPercentagePerYear()}" format="###"/>
                                  <g:if test="${employeeInstance.isWorkingOverTime()}"><img title="Overbooked" alt="Overbooked" style="display:inline; vertical-align:text-bottom;" src="${resource(dir:'images',file:'spinner.gif')}"/>
                                  </g:if>

                                </td>
                                <g:if test="${session.mode.equalsIgnoreCase('budget')}">
                                  <td><g:formatNumber number="${employeeInstance.percentageWork}" format="###"/> <g:if test="${employeeInstance.isWorkingLowerTime()}"> <img title="Working lower than expected" alt="working lower than expected" style="display:inline; vertical-align:text-bottom;" src="${resource(dir:'images',file:'spinner2.png')}"/></g:if>
                                  </td>
                                </g:if>
                              <td >
                                  <g:formatNumber number="${employeeInstance.calcYearSalaryCost()}" format="###"/>

                             </td>
                            </tr>
                                 <%
                                 TotalSalaryCost += employeeInstance.calcYearSalaryCost();
                                 %>
                      </g:if>
                      </g:each>
                      </tbody>
                  </table>
              </div>
              

                <table class="resultTable" style="margin:0px; padding:5px;">
                  <tr>
                    <td width="63%">
                      ${Inter.printOut('Total annual salary cost',session.language)}:
                    </td>
                    <td width="15%" style="text-align:right;">
                      <g:formatNumber number="${TotalSalaryCost}" format="###"/>
                    </td>

                  </tr>
                </table>
            </g:else>
        </div>
    </body>
</html>